<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>珠峰培训：选择器汇总</title>
	<style>
		.tableWrap {
			padding-bottom: 30px;
		}

		table[summary^="CSS选择器"] {
			margin: 0 auto 30px auto;
			width: 96%;
			text-align: center;
			border-collapse: collapse;
		}

		caption {
			margin: 20px 0;
			font-weight: bold;
		}

		th {
			font-size: 1.2em;
			color: #fff;
			background: #000;
			border: 1px solid #000;
		}

		td {
			padding: 5px 0 5px 10px;
			text-align: left;
			border: 1px solid #000;
		}

		tr:nth-child(odd) {
			background: #ddd;
		}
	</style>
</head>

<body>
	<div class="container">
		<h1>珠峰培训：选择器汇总</h1>
		<hr>
		<div class="fixed">
			<p><a href="#">回到顶部</a></p>
		</div>
		<div class="content">
			<h3>目录</h3>
			<ol>
				<li><a href="#details1">CSS选择器总结</a></li>
			</ol>
		</div>
		<div id="details1">
			<p>CSS选择器总结</p>
			<div class="tableWrap">
				<table summary="CSS选择器汇总">
					<caption>选择器汇总</caption>
					<tr>
						<th>选择器</th>
						<th>栗子</th>
						<th>吃栗子</th>
					</tr>
					<tr>
						<td><a href="http://www.w3school.com.cn/cssref/selector_class.asp" title="查看详情"
								target="_blank">.class</a></td>
						<td>.container</td>
						<td>选择class="container"的所有元素</td>
					</tr>
					<tr>
						<td><a href="http://www.w3school.com.cn/cssref/selector_id.asp" title="查看详情"
								target="_blank">#id</a></td>
						<td>#submit</td>
						<td>选中id="submit"的所有元素</td>
					</tr>
					<tr>
						<td><a href="http://www.w3school.com.cn/cssref/selector_all.asp" title="查看详情"
								target="_blank">*</a></td>
						<td>*;<br>.container *</td>
						<td>通配符，选择所有元素</td>
					</tr>
					<tr>
						<td><a href="http://www.w3school.com.cn/cssref/selector_element.asp" title="查看详情"
								target="_blank">element</a></td>
						<td>p</td>
						<td>选择所有&lt;p&gt;元素</td>
					</tr>
					<tr>
						<td><a href="http://www.w3school.com.cn/cssref/selector_element_comma.asp" title="查看详情"
								target="_blank">element,element</a></td>
						<td>div,p,span</td>
						<td>并列，选择所有&lt;div&gt;、&lt;p&gt;、&lt;span&gt;元素</td>
					</tr>
					<tr>
						<td><a href="http://www.w3school.com.cn/cssref/selector_element_element.asp" title="查看详情"
								target="_blank">element element</a></td>
						<td>div p</td>
						<td>选择&lt;div&gt;元素下的所有&lt;p&gt;元素</td>
					</tr>
					<tr>
						<td><a href="http://www.w3school.com.cn/cssref/selector_element_gt.asp" title="查看详情"
								target="_blank">element>element</a></td>
						<td>div>p</td>
						<td>选择&lt;div&gt;元素下的第一代子元素中的所有&lt;p&gt;元素</td>
					</tr>
					<tr>
						<td><a href="http://www.w3school.com.cn/cssref/selector_element_plus.asp" title="查看详情"
								target="_blank">element+element</a></td>
						<td>div+p</td>
						<td>选择&lt;div&gt;后与其相邻的&lt;p&gt;元素（必须同一代）</td>
					</tr>
					<tr>
						<td><a href="http://www.w3school.com.cn/cssref/selector_gen_sibling.asp" title="查看详情"
								target="_blank">element~element</a></td>
						<td>div~p</td>
						<td>选择前面有&lt;div&gt;元素的每个&lt;p&gt;元素（必须同一代,且不比相邻）</td>
					</tr>
					<tr>
						<td><a href="http://www.w3school.com.cn/cssref/selector_attribute.asp" title="查看详情"
								target="_blank">[attribute]</a></td>
						<td>[title]、[target]</td>
						<td>选择具有title、target属性的所有元素</td>
					</tr>
					<tr>
						<td><a href="http://www.w3school.com.cn/cssref/selector_attribute_value.asp" title="查看详情"
								target="_blank">[attribute="value"]</a></td>
						<td>[target="_blank"]</td>
						<td>选择属性target="_blank"的所有元素</td>
					</tr>
					<tr>
						<td><a href="http://www.w3school.com.cn/cssref/selector_attribute_value_contain.asp"
								title="查看详情" target="_blank">[attribute~="value"]</a></td>
						<td>[title~="flower"]</td>
						<td>选择属性title包含"flower"的所有元素</td>
					</tr>
					<tr>
						<td><a href="http://www.w3school.com.cn/cssref/selector_attribute_value_start.asp" title="查看详情"
								target="_blank">[attribute|="value"]</a></td>
						<td>[title|="flower"]</td>
						<td>选择属性title以"flower"开头的所有元素</td>
					</tr>
					<tr>
						<td><a href="http://www.w3school.com.cn/cssref/selector_attr_begin.asp" title="查看详情"
								target="_blank">[attribute^="value"]</a></td>
						<td>a[src^="https"]</td>
						<td>选择src属性值以"https开头的每个&lt;a&gt;元素"</td>
					</tr>
					<tr>
						<td><a href="http://www.w3school.com.cn/cssref/selector_attr_end.asp" title="查看详情"
								target="_blank">[attribute$="value"]</a></td>
						<td>a[src$=".pdf"]</td>
						<td>选择src属性值以"pdf"结尾的每个&lt;a&gt;元素</td>
					</tr>
					<tr>
						<td><a href="http://www.w3school.com.cn/cssref/selector_attr_contain.asp" title="查看详情"
								target="_blank">[attribute*="value"]</a></td>
						<td>a[src*="abc"]</td>
						<td>选择src属性值包含"abc"的每个&lt;a&gt;元素</td>
					</tr>
					<tr>
						<td><a href="http://www.w3school.com.cn/cssref/selector_first-letter.asp" title="查看详情"
								target="_blank">::first-letter</a></td>
						<td>P::first-letter</td>
						<td>选择每个&lt;p&gt;元素内容的首字母</td>
					</tr>
					<tr>
						<td><a href="http://www.w3school.com.cn/cssref/selector_first-line.asp" title="查看详情"
								target="_blank">::first-line</a></td>
						<td>p::first-line</td>
						<td>选择每个&lt;p&gt;元素内容的首行</td>
					</tr>
					<tr>
						<td><a href="http://www.w3school.com.cn/cssref/selector_first-child.asp" title="查看详情"
								target="_blank">:first-child</a></td>
						<td>p:first-child</td>
						<td>选择作为父元素的第一个子元素的每个&lt;p&gt;元素</td>
					</tr>
					<tr>
						<td><a href="http://www.w3school.com.cn/cssref/selector_last-child.asp" title="查看详情"
								target="_blank">:last-child</a></td>
						<td>p:last-child</td>
						<td>选择属于其父元素最后一个子元素的&lt;p&gt;元素</td>
					</tr>
					<tr>
						<td><a href="http://www.w3school.com.cn/cssref/selector_first-of-type.asp" title="查看详情"
								target="_blank">:first-of-type</a></td>
						<td>p:first-of-type</td>
						<td>选择属于其父元素的首个&lt;p&gt;元素的每个&lt;p&gt;元素(既指定必须是第一个子元素，又指定类型。选中所有后代)</td>
					</tr>
					<tr>
						<td><a href="http://www.w3school.com.cn/cssref/selector_last-of-type.asp" title="查看详情"
								target="_blank">:last-of-type</a></td>
						<td>p:last-of-type</td>
						<td>选择属于其父元素的最后&lt;p&gt;元素的每个&lt;p&gt;元素(既指定必须是最后一个子元素，又指定类型。选中所有后代)</td>
					</tr>
					<tr>
						<td><a href="http://www.w3school.com.cn/cssref/selector_only-of-type.asp" title="查看详情"
								target="_blank">:only-of-type</a></td>
						<td>p:only-of-type</td>
						<td>选择属于其父元素唯一&lt;p&gt;元素的每个&lt;p&gt;元素</td>
					</tr>
					<tr>
						<td><a href="http://www.w3school.com.cn/cssref/selector_only-child.asp" title="查看详情"
								target="_blank">:only-child</a></td>
						<td>p:only-child</td>
						<td>选择属于其父元素唯一子元素的每个&lt;p&gt;元素</td>
					</tr>
					<tr>
						<td><a href="http://www.w3school.com.cn/cssref/selector_nth-child.asp" title="查看详情"
								target="_blank">:nth-child(n)</a></td>
						<td>p:nth-child(2)</td>
						<td>选择属于其父元素第二个子元素的每个&lt;p&gt;元素</td>
					</tr>
					<tr>
						<td><a href="http://www.w3school.com.cn/cssref/selector_nth-last-child.asp" title="查看详情"
								target="_blank">:nth-last-child(n)</a></td>
						<td>p:nth-last-child(2)</td>
						<td>同上，倒数</td>
					</tr>
					<tr>
						<td><a href="http://www.w3school.com.cn/cssref/selector_nth-of-type.asp" title="查看详情"
								target="_blank">:nth-of-type(n)</a></td>
						<td>p:nth-of-type(2)</td>
						<td>选择属于其父元素第二个&lt;p&gt;元素的每个&lt;p&gt;元素</td>
					</tr>
					<tr>
						<td><a href="http://www.w3school.com.cn/cssref/selector_nth-last-of-type.asp" title="查看详情"
								target="_blank">:nth-last-of-type(n)</a></td>
						<td>p:nth-last-of-type(2)</td>
						<td>同上，倒数</td>
					</tr>
					<tr>
						<td><a href="http://www.w3school.com.cn/cssref/selector_root.asp" title="查看详情"
								target="_blank">:root</a></td>
						<td>:root</td>
						<td>选择文档的根元素&lt;html&gt;</td>
					</tr>
					<tr>
						<td><a href="http://www.w3school.com.cn/cssref/selector_empty.asp" title="查看详情"
								target="_blank">:empty</a></td>
						<td>p:empty</td>
						<td>选择没有子元素的每个&lt;p&gt;元素（一个空格都不能有）</td>
					</tr>
					<tr>
						<td><a href="http://www.w3school.com.cn/cssref/selector_target.asp" title="查看详情"
								target="_blank">:target</a></td>
						<td>#link:target</td>
						<td>选择当前活动的#link元素</td>
					</tr>
					<tr>
						<td><a href="http://www.w3school.com.cn/cssref/selector_enabled.asp" title="查看详情"
								target="_blank">:enabled</a></td>
						<td>input:enabled</td>
						<td>选择所有可用状态的input元素</td>
					</tr>
					<tr>
						<td><a href="http://www.w3school.com.cn/cssref/selector_disabled.asp" title="查看详情"
								target="_blank">:disabled</a></td>
						<td>input:disabled</td>
						<td>选择所有禁用状态的input元素</td>
					</tr>
					<tr>
						<td><a href="http://www.w3school.com.cn/cssref/selector_checked.asp" title="查看详情"
								target="_blank">:checked</a></td>
						<td>input:checked</td>
						<td>选择所有被选中状态下的input元素</td>
					</tr>
					<tr>
						<td><a href="http://www.w3school.com.cn/cssref/selector_not.asp" title="查看详情"
								target="_blank">:not(selector)</a></td>
						<td>:not(p)</td>
						<td>选中非&lt;p&gt;元素的其他所有元素</td>
					</tr>
					<tr>
						<td><a href="http://www.w3school.com.cn/cssref/selector_selection.asp" title="查看详情"
								target="_blank">::selection</a></td>
						<td>::selection</td>
						<td>选中被用户选取的元素（如鼠标左键长按选中的网页文字）</td>
					</tr>
					<tr>
						<td><a href="http://www.w3school.com.cn/cssref/selector_lang.asp" title="查看详情"
								target="_blank">:lang(language)</a></td>
						<td>p:lang(en)</td>
						<td>选择带有以"en"开头的lang属性值的每个&lt;p&gt;元素</td>
					</tr>
					<tr>
						<td><a href="http://www.w3school.com.cn/cssref/selector_link.asp" title="查看详情"
								target="_blank">:link</a></td>
						<td>a:link</td>
						<td>选择所有未被访问的&lt;a&gt;元素</td>
					</tr>
					<tr>
						<td><a href="http://www.w3school.com.cn/cssref/selector_visited.asp" title="查看详情"
								target="_blank">:visited</a></td>
						<td>a:visited</td>
						<td>选择所有已经被访问的&lt;a&gt;元素</td>
					</tr>
					<tr>
						<td><a href="http://www.w3school.com.cn/cssref/selector_active.asp" title="查看详情"
								target="_blank">:active</a></td>
						<td>a:active</td>
						<td>选择所有活动的&lt;a&gt;元素（被点击时）</td>
					</tr>
					<tr>
						<td><a href="http://www.w3school.com.cn/cssref/selector_hover.asp" title="查看详情"
								target="_blank">:hover</a></td>
						<td>a:hover</td>
						<td>选择鼠标指针位于其上的&lt;a&gt;元素</td>
					</tr>
					<tr>
						<td><a href="http://www.w3school.com.cn/cssref/selector_focus.asp" title="查看详情"
								target="_blank">:focus</a></td>
						<td>input:focus</td>
						<td>选择获得焦点的&lt;input&gt;元素</td>
					</tr>
					<tr>
						<td></td>
						<td></td>
						<td></td>
					</tr>
					<tr>
						<td><a href="http://www.w3school.com.cn/cssref/selector_before.asp" title="查看详情"
								target="_blank">::before</a></td>
						<td>p::before{ content:"" }</td>
						<td>在每个&lt;p&gt;元素前插入内容（content:""为插入内容）</td>
					</tr>
					<tr>
						<td><a href="http://www.w3school.com.cn/cssref/selector_after.asp" title="查看详情"
								target="_blank">::after</a></td>
						<td>p::after{ content:""}</td>
						<td>在每个&lt;p&gt;元素后插入内容（content:""为插入内容）</td>
					</tr>
				</table>
				<table summary="CSS选择器权重计算">
					<caption>CSS选择器权重计算</caption>
					<tr>
						<th>选择器</th>
						<th>表达式</th>
						<th>计算方式</th>
						<th>权重值</th>
					</tr>
					<tr>
						<td>id选择器</td>
						<td>#id</td>
						<td>#id</td>
						<td>100</td>
					</tr>
					<tr>
						<td>class选择器</td>
						<td>.class</td>
						<td>.class</td>
						<td>10</td>
					</tr>
					<tr>
						<td>标签选择器</td>
						<td>p</td>
						<td>元素的tagName</td>
						<td>1</td>
					</tr>
					<tr>
						<td>属性选择器</td>
						<td>[title="查看详情"]</td>
						<td></td>
						<td>10</td>
					</tr>
					<tr>
						<td>相邻选择器（后）</td>
						<td>.class+element</td>
						<td rowspan="4">拆分为两个相应类别选择器，<br>再根据自身权重值计算</td>
						<td>11</td>
					</tr>
					<tr>
						<td>相邻选择器（前）</td>
						<td>#id+.class</td>
						<td>110</td>
					</tr>
					<tr>
						<td>子元素选择器</td>
						<td>table[summary="CSS"]>td</td>
						<td>12</td>
					</tr>
					<tr>
						<td>后代选择器</td>
						<td>div p>span</td>
						<td>3</td>
					</tr>
					<tr>
						<td>通配符</td>
						<td>*</td>
						<td>div *</td>
						<td>1</td>
					</tr>
					<tr>
						<td>伪类选择器</td>
						<td colspan="2">:link，:visited，:active，:not()，:first-child，first-of-type...</td>
						<td>10</td>
					</tr>
					<tr>
						<td>伪元素</td>
						<td colspan="2">::before，::after，::first-letter，::first-line，::selection</td>
						<td>1</td>
					</tr>
				</table>
			</div>
		</div>
	</div>
</body>

</html>